<script setup>
import {
  User,
  House,
  Money,
  Notification,
  Avatar,
  Document,
  Collection,
  ChatDotRound, Notebook
} from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}

</script>

<template>
  <!-- 导航栏-->
  <el-menu
      default-active="/teacher/notice"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router="true"
  >
    <el-menu-item>
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Notification /></el-icon>
        <span style="font-size: 18px">公告管理</span>
      </template>
    <el-menu-item index="/teacher/notice">
      <el-icon><Notification /></el-icon>
      <template #title>查看公告</template>
    </el-menu-item>
      <el-menu-item index="/teacher/add">
        <el-icon><Notification /></el-icon>
        <template #title>添加公告</template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/teacher/student">
      <el-icon><Avatar /></el-icon>
      <template #title>学生管理</template>
    </el-menu-item>
    <el-menu-item index="/teacher/goods">
      <el-icon><Collection /></el-icon>
      <template #title>物品领取记录</template>
    </el-menu-item>
    <el-menu-item index="/teacher/pay">
      <el-icon><Money /></el-icon>
      <template #title>新生缴费记录</template>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Document /></el-icon>
        <span style="font-size: 18px">课程中心</span>
      </template>
           <el-menu-item index="/teacher/course"><el-icon><Document /></el-icon>本学期课程</el-menu-item>
      <el-menu-item index="/teacher/history"><el-icon><Document /></el-icon>往学期课程</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/teacher/profile">
      <el-icon><User /></el-icon>
      <template #title>个人中心</template>
    </el-menu-item>
    <el-menu-item index="/teacher/message">
      <el-icon><ChatDotRound /></el-icon>
      <template #title>消息中心</template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.el-menu-item{
  font-size: 18px;
}
.el-menu-item.is-active{
  font-size: 18px;
}
</style>